<template>
	<div>
		<sh-alert v-bind="alert1"> </sh-alert>
		<sh-alert v-bind="alert2">
			<template #content>Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
		</sh-alert>
		<sh-alert v-bind="alert3">
			<template #content>Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
		</sh-alert>
		<sh-alert v-bind="alert4">
			<template #content>Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
		</sh-alert>
		<sh-alert v-bind="alert5">
			<template #content>Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
		</sh-alert>
	</div>
</template>

<script>
export default {
	name: 'BaseAlert',
	data() {
		return {
			alert1: {
				type: 'info',
				title: 'An info prompt',
				showIcon: true,
				block: true
			},
			alert2: {
				type: 'success',
				title: 'An success prompt',
				showIcon: true,
				closable: true,
				block: true
			},
			alert3: {
				type: 'warning',
				title: 'An warning prompt',
				showIcon: true,
				closable: true,
				block: true
			},
			alert4: {
				type: 'error',
				title: 'An error prompt',
				showIcon: true,
				block: true
			},
			alert5: {
				type: 'error',
				title: '提示'
			}
		}
	}
}
</script>

<style scoped lang="scss"></style>
